<template>
	<view class="more-wrap full box relative bg-primary" :style="{'--padding-value':statusBarHeight_}">
		<view class="fixed-header">
			<view class="mask-bg inset">
				<image :src="sourceUrl + '/mask-bg.png'" class="full" mode="aspectFill"></image>
			</view>
			<view class="location-wrapper">
				<image :src="sourceUrl+'/more-location.png'" class="location-icon"></image>
				<text class="location-value" @click="openMap">{{ cityName }}</text>
				<image :src="sourceUrl+'/more-arrow.png'" class="arrow-icon active"></image>
				<picker :range="areaList" range-key="label" @change="areaChangeHandle">
					<text class="location-value active">{{ activeArea.label }}</text>
				</picker>
				<image :src="sourceUrl+'/more-arrow.png'" class="arrow-icon"></image>
			</view>
		</view>
		<view class="content-wrappper flex column" id="contentWrap">
			<view class="tab-wrapper w-100">
				<scroll-view class="full box" scroll-x :scroll-left="activeTabStyle.scroll" scroll-with-animation>
					<view class="tab-list full box relative" id="tabWrapper">
						<view class="tab-item" v-for="(item,index) in tabList" :key="index"
							:class="{active: index === activeTab}" @click="changeTab(index)">
							<text>{{ item.label }}</text>
						</view>
						<view class="tab-slide" :style="activeTabStyle.styleStr"></view>
					</view>
				</scroll-view>
			</view>
			<view class="relative flex-1 box w-100 mt-24">
				<view class="absolute inset" id="scrollWrap">
					<mescroll-uni :up="{use:false}" :down="{auto:false}" :fixed="false" @init="mescrollInit"
						@down="downCallback" @up="upCallback">
						<view class="scroll-wrapper-conn box" :style="{'--height-value':contentHeight}">
							<swiper class="full box" :current="activeTab" @change="swiperChange">
								<swiper-item class="full box" v-for="(item,index) in tabList" :key="index">
									<list-vue :areaId="activeArea.value" :cityId="city_id" :ref="`list_${index}`"
										:auto="index === 0" :type="item.value" />
								</swiper-item>
							</swiper>
						</view>
					</mescroll-uni>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAreaList } from '@/commonFunc/common.js'
	import ListVue from './com/list.vue'
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				activeTab: 0,
				tabRect: [],
				contentHeight: 500,
				cityName: '',
				city_id: '',
				eventName: 'changeMoreCitySuccess',
				areaList: [],
				areaIndex: 0,
			}
		},
		components: { ListVue },
		onReady() {
			this.initRect()
		},
		onLoad() {
			uni.$on(this.eventName, this.changeSuccess)
		},
		onUnload() {
			uni.$off(this.eventName, this.changeSuccess)
		},
		methods: {
			async areaChangeHandle(ev) {
				const { value } = ev.detail
				this.areaIndex = value * 1
				await this.$delay(1)
				this.downCallback()
			},
			async initArea(city_id) {
				this.areaList = await getAreaList(city_id)
			},
			async changeSuccess(cityData) {
				const { id, name } = cityData
				this.cityName = name
				this.city_id = id
				this.$store.commit('location/addRecentlyData', { id, name })
				this.areaIndex = 0
				await this.$delay(1)
				this.mescroll.triggerDownScroll()
				this.initArea(id)
			},
			openMap() {
				const { cityName, eventName } = this
				uni.navigateTo({
					url: `/pages-bundle/city-list/city-list?current=${cityName}&event=${eventName}`
				})
			},
			downCallback() {
				this.triggerUpdate(this.activeTab, true, value => {
					this.mescroll.endSuccess(value)
				})
			},
			triggerUpdate(index, reset = false, fn = null) {
				const refName = `list_${index}`
				const [refTarget] = this.$refs[refName]
				if (!refTarget) return
				if (!reset && refTarget.hasInit) return
				refTarget.initData(reset, fn)
			},
			swiperChange(ev) {
				const { current } = ev.detail
				this.activeTab = current
				this.triggerUpdate(current, false)
			},
			changeTab(index) {
				if (this.activeTab === index) return
				this.activeTab = index
			},
			initRect() {
				let selector = uni.createSelectorQuery().in(this)
				selector.select('#tabWrapper').boundingClientRect()
				selector.selectAll('#tabWrapper .tab-item').boundingClientRect()
				selector.select('#tabWrapper .tab-slide').boundingClientRect()
				selector.select('#scrollWrap').boundingClientRect()
				selector.exec(resp => {
					const [tabWrap, items, slide, scrollWrap] = resp
					const { height } = scrollWrap
					this.contentHeight = height
					const { left: tabLeft, width: tabWidth } = tabWrap
					const centerValue = tabWidth / 2
					const result = items.map((item, index) => {
						item.left -= tabLeft
						const { left, width } = item
						const calcLeft = left + width / 2
						let scrollLeft = 0
						const resultValue = calcLeft - centerValue
						if (resultValue > 0) {
							scrollLeft = resultValue
						}
						return {
							left,
							width,
							index,
							scrollLeft,
						}
					})
					this.tabRect = result
				})
			},
		},
		created() {
			this.city_id = this.cityId
			this.cityName = this.city
			this.initArea(this.cityId)
		},
		computed: {
			...mapGetters(['categoryList', 'city', 'cityId']),
			activeArea() {
				const target = this.areaList[this.areaIndex]
				return target || { label: '市本级', value: 0 }
			},
			activeTabStyle() {
				const { tabList, activeTab, tabRect } = this
				const styleStr = `--left:0;--width:0;`
				if (!tabRect.length || !tabList.length) return { styleStr, scroll: 0 }
				const target = tabRect[activeTab]
				if (!target) return { styleStr, scroll: 0 }
				const { left, width, scrollLeft } = target
				return { styleStr: `--left:${left};--width:${width};`, scroll: scrollLeft }
			},
			tabList() {
				return this.categoryList.map(item => {
					const { name, id } = item
					return { label: name, value: id }
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.more-wrap {
		--location-height: 88rpx;
		--tab-height: 60rpx;

		::v-deep .mescroll-bottombar {
			display: none !important;
			height: 0 !important;
		}

		.scroll-wrapper-conn {
			width: 100%;
			height: calc(1px * var(--height-value));

		}

		.content-wrappper {
			position: absolute;
			width: 100%;
			left: 0;
			right: 0;
			bottom: 0;
			top: calc(var(--location-height) + var(--padding-value));

			.tab-wrapper {
				width: 100%;
				height: var(--tab-height);
				box-sizing: border-box;
				position: relative;
				padding: 0 32rpx;
				box-sizing: border-box;

				.tab-list {
					font-size: 0;
					width: fit-content;
					white-space: nowrap;

					.tab-slide {
						position: absolute;
						left: calc(1px * var(--left));
						bottom: 0;
						width: calc(1px * var(--width));
						height: 4rpx;
						background: #5ACFFF;
						transition: all cubic-bezier(0.215, 0.610, 0.355, 1) .2s;
					}

					.tab-item {
						display: inline-flex;
						height: var(--tab-height);
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						margin-right: 44rpx;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.6);


						&.active {
							font-weight: bold;
							color: rgba(0, 0, 0, 0.9);
						}

						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}

		.fixed-header {
			width: 100%;
			height: 618rpx;
			box-sizing: border-box;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			padding-top: var(--padding-value);

			.location-wrapper {
				padding: 0 32rpx;
				height: var(--location-height);
				box-sizing: border-box;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.arrow-icon {
					width: 12rpx;
					height: 9rpx;
					&.active{
						margin-left: 8rpx;
					}
				}

				.location-value {
					height: 44rpx;
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.9);
					line-height: 44rpx;
					margin-left: 8rpx;

					&.active {
						margin-right: 8rpx;
						font-size: 28rpx;
						margin-left: 12rpx;
					}
				}

				.location-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.mask-bg {
				position: absolute;
			}
		}
	}
</style>